<template>
  <div>
    <!-- 轮播图区域 -->
    <div>
      <van-swipe class="header-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
          <img :src="item.img" :alt="item.alt" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 宫格区域 -->
    <van-grid :column-num="5" :border="false" :clickable="true">
      <van-grid-item v-for="item in gridList" :key="item.id" :icon="item.url" :text="item.text" />
    </van-grid>
    <!-- 秒杀区域 -->
    <van-count-down :time="countDown">
      <template #default="timeData">
        <span>{{ countDownContent.content }}</span>
        <span>{{ countDownContent.time }}</span>
        <span class="block">{{ timeData.hours }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.minutes }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.seconds }}</span>
      </template>
    </van-count-down>
    <!-- 秒杀商品列表 -->
    <div class="skill-list">
      <div class="skill-item" v-for="item in apiSeckillList" :key="item.proid">
        <img :src="item.img1" alt="" class="item-img" />
        <p class="item-price">￥{{ item.originprice }}</p>
      </div>
    </div>
    <!-- 商品列表 -->
    <van-pull-refresh class="goods-refresh" v-model="refreshLoading" @refresh="onRefresh">
      <div class="goods-list">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
          class="goods-item">
          <van-cell v-for="item in productList" :key="item.proid" @click="goToDetail(item.proid)">
            <div class="item-imgbox">
              <img :src="item.img1" alt="" />
            </div>
            <div>
              <p>{{ item.proname }}</p>
              <p>{{ item.originprice }}</p>
            </div>
          </van-cell>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import {
  useSwiper,
  useGridList,
  useSeckillList,
  useProductList,
} from "@/hooks/HomeViewHook";

const { bannerList } = useSwiper();
const { gridList } = useGridList();
const { countDown, countDownContent, apiSeckillList } = useSeckillList();

const {
  refreshLoading,
  onRefresh,
  loading,
  finished,
  onLoad,
  productList,
  goToDetail,
} = useProductList();
</script>

<style lang="scss" scoped>
.header-swipe {
  height: 400px;

  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;

    img {
      width: 100%;
      height: 400px;
    }
  }
}

.skill-list {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;

  .skill-item {
    .item-img {
      width: 100%;
      height: 100px;
    }

    .item-price {
      font-size: 12px;
      margin: 5px auto;
      text-align: center;
      font-weight: bold;
      color: #ee0a24;
    }
  }
}

.goods-refresh {
  overflow: inherit;

  .goods-list {
    width: 100%;

    .goods-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      width: 100%;
      margin: 10px;
      border-radius: 10px;
      margin: 8px 0;
      overflow: hidden;

      .van-cell {
        width: 48%;
        margin-top: 10px;
      }

      .item-imgbox {
        width: 100%;

        img {
          display: block;
          width: 100%;
        }
      }
    }
  }
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
</style>
